<template>
    <el-container>
        <el-aside width="200px">
            <el-menu router :default-active="$route.path" background-color="#304156" text-color="#ffffff"
                active-text-color="#2f6aad" class="el-menu-vertical-demo">
                <el-menu-item index="/home/index">
                    <span slot="title">小区物联网平台</span>
                </el-menu-item>

                <el-submenu index="1">
                    <template slot="title">
                        <span>小区管理</span>
                    </template>
                    <el-menu-item index="/home/info">
                        <span slot="title">小区信息</span>
                    </el-menu-item>
                    <el-menu-item index="/home/person">
                        <span slot="title">小区人员</span>
                    </el-menu-item>
                    <el-menu-item index="/home/parking">
                        <span slot="title">停车场</span>
                    </el-menu-item>
                    <el-menu-item index="/home/cars">
                        <span slot="title">小区车辆</span>
                    </el-menu-item>
                    
                </el-submenu>


            </el-menu>
        </el-aside>

        <el-container class="w100">
            <el-header>
                <el-row type="flex" justify="space-between" align="middle">
                    <span></span>
                    <h3>当前小区：{{ $store.state.plotData.plotName}}</h3>
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            admin<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>

                        <el-dropdown-menu slot="dropdown">
                        <!-- .native修饰符将事件绑定在最外层的html元素上，才能达到触发退出登录的事件效果 -->
                            <el-dropdown-item @click.native="loginOut">退出登录</el-dropdown-item>
                        </el-dropdown-menu>


                    </el-dropdown>
                </el-row>

            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    name: "Login",
    data() {
        return {}
    },
    created() {
        //调用vuex
        this.$store.dispatch("getPlotData")
    },
    methods: {
        loginOut() {
            this.$confirm('确定退出登录？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '退出成功!'
                });
                this.$router.push('/login')

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消退出'
                });

            })
        }
    },
}
</script>
<style lang="scss" scoped>
.el-container {
    height: 100vh;

    .el-aside {
        background-color: #304156;

    }

    .el-header {
        padding: 0;
        border: 1px solid #eaebea;
        line-height: 55px;
        text-align: center;

        .el-button--text {
            color: black;
        }

        .el-dropdown-link {
            cursor: pointer;
        }
    }



}
</style>